<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>Hello APP</title>
        <link rel="stylesheet" type="text/css" href="./css/aui.css" />
        <link rel="stylesheet" type="text/css" href="./css/aui-eg.css" />
    </head>
    <body>
        <header id="panel_header" class="aui-bar aui-bar-nav aui-bar-pro">AUI-举个栗子</header>
    </body>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-eg.js"></script>
    <script type="text/javascript">
        apiready = function() {
            console.log("Hello Delicate");
            var header = $api.byId('panel_header');
            $api.fixStatusBar(header);
            api.setStatusBarStyle({
                style: 'light'
            });
            var headerPos = $api.offset(header);
            api.openFrame({
                name : 'main',
                url : 'html/main.html',
                bounces : false,
                rect : {
                    x : 0,
                    y : headerPos.h,
                    w : "auto",
                    h : api.winHeight - headerPos.h
                }
            });
        };
    </script>
</html>